<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--edge浏览器H5兼容设置-->
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <!--360浏览器H5兼容设置-->
    <meta content="webkit" name="renderer"/>
    <title>学子商城</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <link href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="../css/top.css" rel="stylesheet" type="text/css"/>
    <link href="../css/index.css" rel="stylesheet" type="text/css"/>
    <link href="../css/layout.css" rel="stylesheet" type="text/css"/>
    <link href="../css/login.css" rel="stylesheet" type="text/css"/>
    <link href="../css/footer.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="../bootstrap3/js/jquery.cookie.js" type="text/javascript"></script>
    <!--		<script src="../js/autoLogin.js" type="text/javascript"></script>-->
</head>
<body>
<!--头部-->
<header class="header">
    <img alt="" src="../images/index/stumalllogo.png"/>
    <span class="pull-right"><small>欢迎访问</small><b>学子商城</b></span>
</header>
<!--主体-->
<div class="container mycontent text-left">
    <!--透明层 -->
    <div class="loginDiv">
        <p>用户登录</p>
        <!--表单开始-->
        <form action="index.html" class="form-horizontal" role="form">
            <!--用户名-->
            <div class="form-group">
                <label class="col-md-3 control-label" for="username">名字：</label>
                <div class="col-md-8">
                    <input class="form-control" id="username" placeholder="请输入用户名" type="text">
                    <span class="help-block" id="helpBlock1"></span>
                </div>
            </div>
            <!--密码-->
            <div class="form-group">
                <label class="col-md-3 control-label" for="password"> 密码：</label>
                <div class="col-md-8">
                    <input class="form-control" id="password" placeholder="请输入密码" type="password">
                    <span class="help-block" id="helpBlock2"></span>
                </div>
            </div>
            <!-- 记住我-->
            <div class="form-group">
                <div class="col-md-offset-3 col-md-6">
                    <div class="checkbox">
                        <label>
                            <input id="auto" type="checkbox">自动登录
                        </label>
                    </div>
                </div>
            </div>
            <!--提交按钮-->
            <div class="form-group">
                <label class="col-md-3 control-label"></label>
                <div class="col-md-8">
                    <input class="btn btn-primary" id="loginBtn" type="button" value="登录"/>
                    <span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>
                </div>
            </div>
        </form>
    </div>
</div>
<!--页脚开始-->
<footer class="footer">
    <!-- 品质保障，私人定制等-->
    <div class="text-center rights container">
        <div class="col-md-offset-2 col-md-2">
            <span class="fa fa-thumbs-o-up"></span>
            <p>品质保障</p>
        </div>
        <div class="col-md-2">
            <span class="fa fa-address-card-o"></span>
            <p>私人订制</p>
        </div>
        <div class="col-md-2">
            <span class="fa fa-graduation-cap"></span>
            <p>学生特供</p>
        </div>
        <div class="col-md-2">
            <span class="fa fa-bitcoin"></span>
            <p>专属特权</p>
        </div>
    </div>
    <!--联系我们、下载客户端等-->
    <div class="container beforeBottom">
        <div class="col-md-offset-1 col-md-3">
            <div><img alt="" class="footLogo" src="../images/index/stumalllogo.png"/></div>
            <div><img alt="" src="../images/index/footerFont.png"/></div>
        </div>
        <div class="col-md-4 callus text-center">
            <div class="col-md-4">
                <ul>
                    <li><a href="#"><p>买家帮助</p></a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">服务保障</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul>
                    <li><a href="#"><p>商家帮助</p></a></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul>
                    <li><a href="#"><p>关于我们</p></a></li>
                    <li><a href="#">关于达内</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li>
                        <span class="fa fa-wechat"></span>
                        <span class="fa fa-weibo"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-5">
                <p>学子商城客户端</p>
                <img class="lf" src="../images/index/ios.png">
                <img alt="" class="lf" src="../images/index/android.png"/>
            </div>
            <div class="col-md-6">
                <img src="../images/index/erweima.png">
            </div>
        </div>
    </div>
    <!-- 页面底部-备案号 #footer -->
    <div class="col-md-12 text-center bottom">
        Copyright © 2018 Tedu.cn All Rights Reserved 京ICP备08000853号-56 <a href="http://www.tedu.cn/" target="_blank">达内时代科技集团有限公司</a>
        版权所有
    </div>
</footer>
<!--页脚结束-->
<script type="text/javascript">
    var loginUrl = "../user/login"
    $(function () { // 页面就绪事件
        $("#username").bind("input", function () {
            checkLength("username", 6, 12);
        });

        // 为密码输入框添加失去焦点事件
        $("#password").blur(function () {
            checkEmpty("password", "密码不能为空");
        });

        // 为用户名输入框添加失去焦点事件
        $("#username").blur(function () {
            if (!checkEmpty("username", "用户名不能为空")) {
                return;
            }
            if (!checkLength("username", 6, 12)) {
                return;
            }
            // 勾选自动登录
            // 获取浏览器保存的autoLogin的Cookie
            var cookie = $.cookie("autoLogin");
            if (cookie != null) {
                // 获取该Cookie的value中保存的用户名
                var cUsername = cookie.split("_#_")[0];
                // 判断与当前用户名是否一致
                if (cUsername == $("#username").val()) {
                    // 是：将自动登录设为勾选状态
                    $("#auto")[0].checked = true;
                } else {
                    $("#auto")[0].checked = false;
                }
            }
        });

        // 为提交按钮添加点击事件
        $("#loginBtn").click(function () {
            // 获取表单数据
            var username = $("#username").val();
            var pwd = $("#password").val();

            // 判断页面中的input是否都是验证成功的状态
            var divArr = $("div.has-success");
            if (divArr.length != 2) { // 存在异常项
                return;
            }

            // 提交表单
            var params = {
                username: username,
                password: pwd
            }
            // 查看是否勾选自动登录
            if ($("#auto")[0].checked) {
                // 请求参数中添加 checked=true
                params.checked = true;
            }

            // 发送AJAX请求
            $.post(loginUrl, params, function (result, textStatus, request) {
                // var data = JSON.parse(result);
                // 处理响应数据
                if (result.code === 1000) { // 正常响应
                    let accessTokenKet = "AccessToken";
                    let accessToken = request.getResponseHeader(accessTokenKet);
                    window.localStorage.setItem(accessTokenKet, accessToken);
                    // 将头像路径添加到cookie中,{"expires":7 单位是天}
                    //$.cookie("avatar",result.result.avatar,{"expires":7});
                    // 跳转登录页面
                    window.location.replace("index.html");
                } else { // 异常响应
                    alert(result.msg);
                }
            });
        });
    });

    function checkLength(name, minLength, maxLength) {
        if ($("#" + name).val().length < minLength) { // 小于长度
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("长度不能小于" + minLength);
            return false;
        } else if ($("#" + name).val().length > maxLength) {
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("长度不能大于" + maxLength);
            return false;
        } else { // 长度合适
            $("#" + name).parents(".form-group").removeClass("has-error").addClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("");
            return true;
        }
    }

    function checkEmpty(name, msg) {
        if ($("#" + name).val() == "") { // 为空
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text(msg);
            return false;
        } else { // 不为空
            $("#" + name).parents(".form-group").removeClass("has-error").addClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("");
            return true;
        }
    }
</script>
</body>
</html>
